<template>
  <div class="addContainer">
    <div
      style="
        height: 100%;
        padding-left: 150px;
        padding-right: 150px;
        overflow-y: auto;
        padding-bottom: 70px;
      "
    >
      <div style="padding: 20px">
        <el-card>
          <template #header>
            <span style="font-weight: bold; font-size: 16px">编辑生产领料</span>
          </template>
          <div class="addBody">
            <div class="basicInfoContainer">
              <div class="milestone">
                <div class="milestone-content">基础信息</div>
              </div>
              <el-form
                style="margin-top: 40px"
                label-width="120"
                :model="formData"
              >
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="领料单编号">
                      <el-input
                        v-model="formData.requisitionCode"
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="领料单名称">
                      <el-input
                        v-model="formData.requisitionName"
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="领料日期">
                      <el-date-picker
                        v-model="formData.requisitionDate"
                        style="width: 300px"
                        type="date"
                        placeholder="请选择日期"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="领料人">
                      <el-input
                        v-model="formData.receiver"
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="工单名称">
                      <el-input
                        v-model="formData.workOrderName"
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="工单编号">
                      <el-input
                        v-model="formData.workOrderCode"
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="任务名称">
                      <el-input
                        v-model="formData.taskName"
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="任务编号">
                      <el-input
                        v-model="formData.taskCode"
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="工艺路线">
                      <el-input
                        v-model="formData.processRoute"
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="工序名称">
                      <el-input
                        v-model="formData.procedureName"
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="备注">
                  <el-input
                    v-model="formData.remark"
                    type="textarea"
                    style="width: 795px"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div class="bomContainer">
              <div class="bomInfoContainer">
                <div class="milestone">
                  <div class="milestone-content">物料清单</div>
                </div>
                <div class="buttonGroup" style="margin-top: 20px">
                  <el-button type="primary" style="width: 80px">添加</el-button>
                  <el-button type="primary" style="width: 80px" plain
                    >移除
                  </el-button>
                </div>
                <el-table border style="margin-top: 20px">
                  <el-table-column
                    type="selection"
                    align="center"
                    fixed="left"
                  ></el-table-column>
                  <el-table-column
                    type="index"
                    align="center"
                    label="序号"
                    width="60"
                    fixed="left"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    label="物料名称"
                    width="90"
                    fixed="left"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    label="物料编号"
                    width="90"
                    fixed="left"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    label="规格型号"
                    width="90"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    label="单位"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    label="当前库存"
                    width="90"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    label="领用数量"
                    width="90"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    label="批次号"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    label="仓库名称"
                    width="90"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    label="库区名称"
                    width="90"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    label="库位名称"
                    width="90"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    label="备注"
                    width="200"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    label="操作"
                    width="100"
                    fixed="right"
                  ></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="footer" :class="{ 'footer-visible': isFooterVisible }">
      <div class="footerButton">
        <el-button type="primary" plain style="width: 80px" @click="close"
          >关闭
        </el-button>
        <el-button type="primary" style="width: 80px" @click="submitForm"
          >确定</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import {
  getMaterialRequisitionDetail,
  updateMaterialRequisition,
} from "@/api/ProductPicking/index";
import type { MaterialAddParamsType } from "@/api/ProductPicking/params";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";

const $router = useRouter();
const isEdit = ref<boolean>(false);
const objectId = ref<string>("");
const isFooterVisible = ref(false);
const close = () => {
  $router.replace("/storage/entrance/material");
};

onMounted(() => {
  setTimeout(() => {
    isFooterVisible.value = true;
  }, 100);
});

const formData = ref<MaterialAddParamsType>({
  requisitionName: "",
  requisitionCode: "",
  requisitionDate: "",
  receiver: "",
  workOrderName: "",
  workOrderCode: "",
  taskName: "",
  taskCode: "",
  processRoute: "",
  procedureName: "",
  materialInfo: "",
  totalQuantity: "10",
  remark: "",
});

const fetchDetailData = async (objectId: string) => {
  try {
    const res = await getMaterialRequisitionDetail(objectId);
    formData.value = {
      requisitionName: res.requisitionName,
      requisitionCode: res.requisitionCode,
      requisitionDate: res.requisitionDate,
      receiver: res.receiver,
      workOrderName: res.workOrderName,
      workOrderCode: res.workOrderCode,
      taskName: res.taskName,
      taskCode: res.taskCode,
      processRoute: res.processRoute,
      procedureName: res.procedureName,
      materialInfo: res.materialInfo,
      totalQuantity: res.totalQuantity,
      remark: res.remark,
    };
  } catch (error) {
    console.error("获取详情失败:", error);
  }
};

const submitForm = async () => {
  try {
    const params: MaterialAddParamsType = {
      requisitionName: formData.value.requisitionName,
      requisitionCode: formData.value.requisitionCode,
      requisitionDate: dayjs(formData.value.requisitionDate).format(
        "YYYY-MM-DD"
      ),
      receiver: formData.value.receiver,
      workOrderName: formData.value.workOrderName,
      workOrderCode: formData.value.workOrderCode,
      taskName: formData.value.taskName,
      taskCode: formData.value.taskCode,
      processRoute: formData.value.processRoute,
      procedureName: formData.value.procedureName,
      materialInfo: formData.value.materialInfo,
      totalQuantity: formData.value.totalQuantity,
      remark: formData.value.remark,
    };

    const res = await updateMaterialRequisition(objectId.value, params);
    ElMessage.success("更新成功");
    $router.replace("/storage/entrance/material");
  } catch (error) {
    console.error("提交失败:", error);
    ElMessage.error("更新失败");
  }
};

onMounted(() => {
  const route = useRoute();
  if (route.query && route.query.objectId) {
    console.log("a");
    isEdit.value = true;
    objectId.value = route.query.objectId as string;
    fetchDetailData(objectId.value);
  }
});
</script>

<style scoped lang="scss">
.addContainer {
  width: 100%;
  position: relative;
  height: 100%;
  transform: translate(0);
  // margin-bottom: 330px;
  // padding-right: 150px;
  // padding-left: 150px;

  .addBody {
    width: 100%;

    .basicInfoContainer,
    .bomInfoContainer {
      padding: 20px;

      .milestone {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.5px;
        background-color: #dfe2e7;

        .milestone-content {
          border: 1.5px solid #dfe2e7;
          padding: 10px;
          padding-left: 20px;
          padding-right: 20px;
          font-weight: bold;
          font-size: 15px;
          border-radius: 10px;
          z-index: 999;
          background-color: #fff;
          color: #1b9aee;
        }
      }
    }

    .bomInfoContainer {
      margin-top: 20px;
    }
  }

  .footer {
    z-index: 999;
    width: 100%;
    height: 70px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    box-shadow: 0 -8px 10px rgba(92, 92, 92, 0.1);
    transform: translateY(100%); // 初始状态在视口下方
    transition: transform 0.5s ease-out; // 添加过渡效果

    &.footer-visible {
      transform: translateY(0); // 显示时回到原位
    }
  }
}
</style>
